<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lines, through time.</title>
<style type="text/css">
@import 'index.css';

</style>
<script type="text/javascript">
var ProjectID = <? echo isset($_GET['ProjectID']) ? $_GET['ProjectID'] : 24; ?>;

</script>
<script type="text/javascript" src="../jquery/jquery-latest.js"></script>
<script type="text/javascript" src="../jquery/dimensions.js"></script>
<script type="text/javascript" src="/includes/js/jscalendar-1.0/calendar.js"></script>
<!-- import the calendar script -->
<script type="text/javascript" src="/includes/js/jscalendar-1.0/lang/calendar-en.js"></script>
<!-- import the language module -->
<script type="text/javascript" src="/includes/js/jscalendar-1.0/calendar-setup.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/includes/js/jscalendar-1.0/calendar-green.css" title="green" />
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- getcjs.php?compress=yes&name= -->
</head>
<body>
<div id="notice" style="display:none">Contacting Server...</div>
<span class="links"><a id="debugtoggle" href="javascript:;">debug toggle</a> <a id="rendercolumns" href="javascript:;">render columns</a> <a id="rendertopics" href="javascript:;">render topics</a> <a id="renderitems" href="javascript:;">render items</a></span>
<fieldset style="float:left">
<legend>Step 1 - Set the boundries of the time line:</legend>
<input type="hidden" name="inStartDate" id="inStartDate" />
<input type="hidden" name="inEndDate" id="inEndDate" />
<p>Start Date: <span style="background-color: #ff8; cursor: default;" id="startDate">Click to set timeline start date</span>
  <script type="text/javascript">
    Calendar.setup({
        inputField     :    "inStartDate",     // id of the input field
        ifFormat       :    "%Y-%m-%d",     // format of the input field (even if hidden, this format will be honored)
        displayArea    :    "startDate",       // ID of the span where the date is to be shown
        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script>
  End Date: <span style="background-color: #ff8; cursor: default;" id="endDate">Click to set timeline end date</span>
  <script type="text/javascript">
    Calendar.setup({
        inputField     :    "inEndDate",     // id of the input field
        ifFormat       :    "%Y-%m-%d",     // format of the input field (even if hidden, this format will be honored)
        displayArea    :    "endDate",       // ID of the span where the date is to be shown
        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script>
  <a id="initTimeline" href="javascript:;">initTimeline</a> </p>
</fieldset>
<fieldset>
<legend>Step 2 - Add a row or rows:</legend>
<label for="textfield">Row ID</label>
<input type="text" name="rowid" id="rowid" />
<label for="label">Row Caption</label>
<input type="text" name="rowcaption" id="rowcaption" />
<a id="addrow" href="javascript:;">add row</a> <br />
</fieldset>
<fieldset style="clear:both">
<legend>Step 3 - Add items to rows:</legend>
<label for="itemid">Item ID</label>
<input type="text" name="itemid" id="itemid" />
<label for="itemRowId">Row</label>
<select name="itemRowId" id="itemRowId">
</select>
<label for="itemhtml">Item html</label>
<textarea name="itemhtml" cols="40" rows="4" id="itemhtml"><div style="background-color:#a1b77b">sample</div>
</textarea>
<input type="hidden" name="itemStartDate" id="itemStartDate" />
<input type="hidden" name="itemEndDate" id="itemEndDate" />
<p>Start Date: <span style="background-color: #ff8; cursor: default;" id="iStartDate">Click to set item start date</span>
  <script type="text/javascript">
    Calendar.setup({
        inputField     :    "itemStartDate",     // id of the input field
        ifFormat       :    "%Y-%m-%d",     // format of the input field (even if hidden, this format will be honored)
        displayArea    :    "iStartDate",       // ID of the span where the date is to be shown
        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script>
  End Date: <span style="background-color: #ff8; cursor: default;" id="iEndDate">Click to set item end date</span>
  <script type="text/javascript">
    Calendar.setup({
        inputField     :    "itemEndDate",     // id of the input field
        ifFormat       :    "%Y-%m-%d",     // format of the input field (even if hidden, this format will be honored)
        displayArea    :    "iEndDate",       // ID of the span where the date is to be shown
        daFormat       :    "%A, %B %d, %Y",// format of the displayed date
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });
</script>
  <a id="additem" href="javascript:;">add item</a>
</fieldset>
<div id="timeline">
</div><div id="debug"></div>
</body>
</html>
